<template>
  <div>
    <!-- <div class="head" @click="showProblem = true">
      <span v-if="!form.typeName">请选择咨询类型</span>
      <span v-else>{{form.typeName}}</span>
      <van-icon name="arrow-down" />
    </div> -->
    <van-cell >
          <div class="flex-between" @click="showProblem = true">
            <div class="col-999999 m-r-10">{{ form.typeName || '请选择咨询类型' }}</div>
            <div class="line-text-out text-right rightIcon">
              <img width="8px" src="../../assets/img/bzsc/selectDown.png" />
            </div>
          </div>
        </van-cell>

        <div class="replyMessage">
      <p>请描述您所遇到的问题</p>
      <van-field
        v-model="form.content"
        class="question"
        name="content"
        rows="4"
        autosize
        type="textarea"
        maxlength="100"
        input-align="left"
        placeholder="请您详细填写相关动物病情、时间、部位，使用兽药情况等，便于转诊给最适合的专家。"
      />
      <div class="spacing" />
      <div style="background: #fff; padding: 10px 20px">
        <p class="col-333 font-15" style="margin-bottom:5px">若有图片，更能清晰的反应问题：</p>
        <UploadImg v-model="imgs"></UploadImg>
        <div class="tip">注：支持格式JPG、JPEG、PNG，最多上传5张照片，单个不超过5M。</div>
      </div>
    </div>
    <div class="add-btn">
      <van-button
        block
        type="info"
        color="#37B5B5"
        style="width: 85%; margin: 45px auto"
        @click="onSave"
        size="large"
        :loading="loading"
        loading-text="提交中..."
        >保存</van-button
      >
    </div>
        <van-popup v-model="showProblem" position="bottom">
      <van-picker
        title="选择类型"
        show-toolbar
        :columns="problemList"
        @confirm="problemSave"
        @cancel="showProblem = false"

        value-key="label"
      />
    </van-popup>
  </div>
</template>
<script>
import {
  Dialog,
  Toast,
  Icon,
  Cell,
  Picker,
  Popup,
Field,
  Button
} from 'vant'
import { getValue, clearValue, setValue } from '@/utils/auth'
import { businessData4Amis, ystw } from '@/api/record'
import UploadImg from '../../components/uploadImg'

export default {
  components: {
    [Icon.name]: Icon,
    [Toast.name]: Toast,
    [Cell.name]: Cell,
    [Picker.name]: Picker,
    [Popup.name]: Popup,
    [Button.name]: Button,
    [Dialog.Component.name]: Dialog.Component,
    [Dialog.name]: Dialog,
    [Field.name]: Field,
    UploadImg
  },
  data() {
    return {
      showProblem: false,
      problemList: [],
      imgs: [],
      form: {
        content: '', // 问题内容
        uploadImgs: '', // 问题图片
        typeCode: '', // 专家分类
        typeName: '',
        consultationMode: 1
      },
      loading: false
    }
  },

  created() {
    this.loadList()
  },
  methods: {
    loadList() {
      businessData4Amis().then(res => {
        console.log(res)
        this.problemList = res.data.options
      })
    },
    problemSave(e) {
      this.form.typeName = e.label
      this.form.typeCode = e.value
      this.showProblem = false
      console.log(e)
    },
    onSave() {
      if (!this.form.content) {
        Toast('请输入问题')
        return
      }
      if (!this.form.typeName) {
        Toast('请选择专家分类')
        return
      }
      this.loading = true

      this.form.uploadImgs = this.imgs.map(ele => ele.baseUrl).toString()
      ystw(this.form).then(res => {
        console.log(res)
        if (res.status === 0) {
          Toast('提问成功')
          setTimeout(() => {
            this.$bridge.call('base.closePage')
          }, 1000)
        } else {
          Toast(res.msg)
        }
        this.loading = false
      })

      // this.$bridge.call('editExpertInfo')
    }
  }
}
</script>
<style lang="scss" scoped>
.van-cell::after {
  border-bottom: 1px solid #fff;
}
.question {
  padding: 5px 16px;
  margin-bottom: -2px;
}
::v-deep .van-field__body {
  border: 1px solid #eeeeee;
  padding: 8px;
  border-radius: 4px;
}
textarea{
  background-color: #f7f7f7;
}
.box{
  width: 100vw;
  height: 100vh;
  padding: 20px;
  box-sizing: border-box;
  background-color: #fff;
  .head{
    border:1px solid #dddddd;
    box-sizing: border-box;
    border-radius: 2px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding:10px 5px;
  }
  .title{
    padding: 15px 0;
    font-size: 15px;
    color: #333333;
  }
  textarea{
    width: 100%;
    height: 200px;
    padding: 20px;
    background-color: #dddddd;
    box-sizing: border-box;
  }
}
.add-btn {
  padding-bottom: 20px;
}
.replyMessage {
  margin-top: 10px;
  background-color: #fff;
  > p {
    padding: 10px 16px 5px;
    color: #333333;
    font-size: 15px;
  }
}
.tip {
  color: #999999;
  font-size: 12px;
  margin-top: 6px;
}
</style>
